<template>
	<view class="con-box">
		<view class="backImg">
			<view class="backImg-left">
				<view @tap="back" class="backImg-left">
					<image src="../../static/detail/back.png" mode="widthFix"></image>
				</view>
			</view>
			<view>资金转入说明</view>
			<view class="backImg-right"></view>
		</view>
		
		<view class="main">
			<image class="title" src="@/static/user/title.png" mode="widthFix"></image>
			<view class="title1">
				<view>转入及时无难度，资金随用不用愁</view>
				<image src="@/static/user/icons.png" mode="heightFix"></image>
			</view>
			
			<view class="contentBox">
				<view class="content">
					<view class="head">
						<view>操作步骤说明</view>
						<image src="@/static/user/icon1.png" mode="widthFix"></image>
					</view>
					
					<view class="step">
						<view class="leftCont">
							<image src="@/static/user/icon2.png" mode="widthFix"></image>
							<text>1</text>
						</view>
						<view class="rightCont">
							<text>第一步：复制银行收款账户</text>
							<view>收款账户：**** **** **** **** 8888<text @tap="copy(`456465`)">复制</text></view>
						</view>
					</view>
					
					<view class="step">
						<view class="leftCont">
							<image src="@/static/user/icon2.png" mode="widthFix"></image>
							<text>2</text>
						</view>
						<view class="rightCont">
							<text>第二步：打开手机银行app，进入转账界面</text>
							<view>登录手机银行app，首页-转账-银行账号转账</view>
						</view>
					</view>
					
					<view class="step">
						<view class="leftCont">
							<image src="@/static/user/icon2.png" mode="widthFix"></image>
							<text>3</text>
						</view>
						<view class="rightCont">
							<text>第三步：填写转账信息</text>
							<view>粘贴收款账户，选择收款银行，输入金额</text></view>
						</view>
					</view>
					
					<view class="step">
						<view class="leftCont">
							<image src="@/static/user/icon2.png" mode="widthFix"></image>
							<text>4</text>
						</view>
						<view class="rightCont">
							<text>第四步：回到h5，复制附言信息</text>
							<view>附言信息：911 +{{userAccount.subAccT}}<text @tap="copy(`911+${userAccount.subAcc}`)">复制</text></view>
						</view>
					</view>
					<!-- 911+ -->
					
					<view class="step">
						<view class="leftCont">
							<image src="@/static/user/icon2.png" mode="widthFix"></image>
							<text>5</text>
						</view>
						<view class="rightCont">
							<text>第五步：打开手机银行app，粘贴附言</text>
							<view>粘贴转账附言信息，确认转账</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {getAccountData} from '@/api/user.js'
	export default {
		data() {
			return {
				userAccount:{}
			}
		},
		onLoad() {
			this.getAccount();
		},
		methods: {
			copy(str){
				uni.setClipboardData({
					data: str,
					success: ()=> {
					}
				});
			},
			getAccount(){
				this.$nextTick(() => {
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getAccountData({}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						data["subAccT"] = (data.subAcc).substring(0,5) + "******" + (data.subAcc).substring(13,17);
						this.userAccount = data;
					} else {
						this.$u.toast(res.data.msg);
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.con-box {
		min-height: 100vh;
		background-image: url("../../static/user/recharge.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-bottom: 20upx;
		.main{
			padding-top: 200upx;
			text-align: center;
			.contentBox{
				padding: 0 40upx;
				padding-top: 100upx;
				.content{
					border-radius: 20upx;
					background-color: #fff;
					position: relative;
					padding: 0 26upx;
					padding-top: 80upx;
					.step{
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						padding-top: 32upx;
						.rightCont{
							text-align: left;
							padding-left: 20upx;
							padding-bottom: 32upx;
							border-bottom: 1px solid rgba($color: #5C4CF0, $alpha: 0.2);
							>text{
								font-size: 28upx;
								color: #333;
								display: block;
							}
							view{
								font-size: 24upx;
								color: #666;
								margin-top: 8upx;
								>text{
									font-size: 24upx;
									color: #EF3D26;
									font-weight: bold;
									margin-left: 20upx;
								}
							}
						}
						.leftCont{
							position: relative;
							width: 64upx;
							height: 64upx;
							border-radius: 50%;
							overflow: hidden;
							text-align: center;
							line-height: 64upx;
							text{
								font-size: 36upx;
								font-family: Alegreya Sans SC ExtraBold;
								font-weight: normal;
								padding-right: 4upx;
								color: #FFFFFF;
								position: relative;
								z-index: 1;
								font-style: italic;
							}
							image{
								width: 100%;
								position: absolute;
								top: 0;
								left: 0;
							}
						}
					}
					.head{
						position: absolute;
						left: 50%;
						top: -26upx;
						width: 410upx;
						margin-left: -205upx;
						text-align: center;
						view{
							position: relative;
							z-index: 1;
							font-size: 40upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 90upx;
							text-shadow: 0px 4upx 3upx rgba(216, 14, 21, 0.67);
						}
						image{
							width: 100%;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
				}
			}
			.title{
				width: 80%;
			}
			.title1{
				width: 100%;
				position: relative;
				text-align: center;
				margin-top: 10upx;
				view{
					font-size: 24upx;
					line-height: 44upx;
					color: rgba($color: #fff, $alpha: 0.8);
				}
				image{
					height: 44upx;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
		.backImg {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			padding: 40upx;
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;

			.backImg-left {
				display: flex;
				align-items: center;

				image {
					width: 20upx;
					height: 45upx;
				}
			}

			.backImg-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				image {
					width: 44upx;
					height: 36upx;
					margin-left: 10upx;
				}

				.share {
					width: 36upx;
					height: 36upx;
				}
			}
		}

	}
</style>
